<template>
  <div>
    <!-- 头部 -->
    <home-head></home-head>
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <div class="container">
        <!-- 轮播 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for = 'banner in banners'
          :key = 'banner.id'
        >
          <img :src="banner.picUrl" alt="">
        </van-swipe-item>
      </van-swipe>
      <!-- /轮播 -->
      <van-grid direction="horizontal">
        <van-grid-item icon="checked" text="品牌鲜花网" />
        <van-grid-item icon="checked" text="实拍秀" />
        <van-grid-item icon="checked" text="1小时送达" />
        <van-grid-item icon="checked" text="50w+好评" />
      </van-grid>
      <!-- 分类列表 -->
      <van-grid :column-num="5">
        <van-grid-item
        v-for="cate in cates"
        :key="cate.id"
        :icon='cate.icon'
        :text='cate.name'
        @click ="enterList(cate.id)"
        />
      </van-grid>
      <!-- /分类列表 -->
      <!-- 花束推荐 -->
      <recommends
      :recommends = 'recommends'
      @click="clickItem"
      @clickAddCart ='add_cart'
      ></recommends>
      <!-- /花束推荐 -->
      </div>
    </van-pull-refresh>
    <my-tabbar></my-tabbar>
    <!-- <loading/> -->
  </div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import HomeHead from './components/HomeHead'
import Recommends from './components/Recommends'
// import Loading from '../../plugins/Loading'
import { getCates, getHomeBanners, getRecommends } from '@api'
import { mapActions } from 'vuex'
import { Toast } from 'vant'
export default {
  data () {
    return {
      banners: [],
      cates: [],
      recommends: [],
      isLoading: false
    }
  },
  created () {
    this.fetchCates()
    this.fetchBanners()
    this.fetchRecommends()
  },
  methods: {
    // 点击图标加入购物车
    add_cart (item) {
      item.isChecked = true
      item.num = 1
      this.toAddCart(item)
      Toast('添加购物车成功')
    },
    // 进入列表页
    enterList (cateid) {
      this.$router.push(`/itemlists/${cateid}`)
    },
    // 点击商品进入详情页
    clickItem (id) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    onRefresh () {
      this.fetchRecommends()
    },
    fetchCates () {
      getCates().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    },
    fetchBanners () {
      getHomeBanners().then(res => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    fetchRecommends () {
      getRecommends().then(res => {
        if (res.data.code === 0) {
          this.isLoading = false
          this.recommends = res.data.data
        }
      })
    },
    ...mapActions('cart', ['toAddCart'])
  },
  components: {
    MyTabbar,
    HomeHead,
    Recommends
    // Loading
  }
}
</script>

<style lang="scss" scoped>
.my-swipe{
  img{
    width: 100%;
  }
}
/deep/ .van-grid-item__icon{
  font-size: 14px;
}
/deep/ .van-grid-item__content--horizontal .van-grid-item__icon+.van-grid-item__text{
  margin-left: 2px;
  color: #666;
}
/deep/ .van-icon__image{
  width: 30px;
  height: 30px;
}
</style>
